<template>
  <div>
    <PageWrapper contentBackground :contentFullHeight="true">
      <Row :gutter="24">
        <Col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
          <div style="overflow-y: scroll; overflow-x: hidden; height: 800px">
            <BasicTree
              :treeData="treeData"
              :rightMenuList="rightMenuList"
              :toolbar="true"
              :search="true"
              :replaceFields="{ children: 'listSonPart', title: 'title', key: 'partId' }"
              @select="selectTree"
            />
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
          <BasicTable @register="registerTable" />
        </Col>
      </Row>
      <!-- 生成图档 -->
      <generateFrame @register="registerFrame" />
      <!-- 显示设置 -->
      <DisplaySettings @register="registerDisplaySettings" />
      <!-- 添加子件 -->
      <AddChild @register="registerAddChild" />
      <!-- 结构描述 -->
      <structureDes @register="registerStructureDes" />
      <!-- 调整子件顺序 -->
      <adjustSubPartOrder @register="registerAdjustSubPartOrder" />
    </PageWrapper>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { Row, Col } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree/index';
  import { ContextMenuItem } from '/@/components/ContextMenu/src/typing';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';

  // 页面引入
  import generateFrame from '../../components/generateFrame.vue';
  import DisplaySettings from '../../components/DisplaySettings.vue';
  import AddChild from '../../components/addChild.vue';
  import structureDes from './components/structureDes.vue';
  import adjustSubPartOrder from './components/adjustSubPartOrder.vue';

  import {
    GetPartStructure,
    GetPartStructureTable,
    GetPartStructureTableByTree,
  } from '/@/api/demo/partManager';
  import { getFormConfig } from './tableData';

  // 定义初始数据
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const route = useRoute();
  const tableData = ref<any>([]);
  const treeData = ref<any>([]);

  const rightMenuList = ref<ContextMenuItem[]>([
    {
      label: t('routes.demo.partManager.productStructurePage.generateFrame'),
      divider: true,
      handler: () => {
        openFrame(true);
      },
    },
    {
      label: t('routes.demo.partManager.productStructurePage.displaySetting'),
      divider: true,
      handler: () => {
        openSetting(true);
      },
    },
    { label: t('routes.demo.partManager.productStructurePage.useSituation'), divider: true },
    {
      label: t('routes.demo.partManager.productStructurePage.editPart'),
      divider: true,
    },
    { label: t('routes.demo.partManager.productStructurePage.openProcessInstance'), divider: true },
    {
      label: t('routes.demo.partManager.productStructurePage.createSubPart'),
      divider: true,
      children: [
        {
          label: t('routes.demo.partManager.productStructurePage.createSubPartChild.customPart'),
          divider: true,
        },
        {
          label: t('routes.demo.partManager.productStructurePage.createSubPartChild.standardPart'),
          divider: true,
        },
        {
          label: t(
            'routes.demo.partManager.productStructurePage.createSubPartChild.electricalPart',
          ),
          divider: true,
        },
        {
          label: t(
            'routes.demo.partManager.productStructurePage.createSubPartChild.electricalElement',
          ),
          divider: true,
        },
        {
          label: t('routes.demo.partManager.productStructurePage.createSubPartChild.machiningPart'),
          divider: true,
        },
        {
          label: t(
            'routes.demo.partManager.productStructurePage.createSubPartChild.outsourcingPart',
          ),
          divider: true,
        },
      ],
    },
    {
      label: t('routes.demo.partManager.productStructurePage.adjustSubPartOrder'),
      divider: true,
      handler: () => {
        openAdjustSubPartOrder(true);
      },
    },
    {
      label: t('routes.demo.partManager.productStructurePage.addSubPart'),
      divider: true,
      handler: () => {
        openAddChild(true);
      },
    },
    { label: t('routes.demo.partManager.productStructurePage.copyPartCode'), divider: true },
    { label: t('routes.demo.partManager.productStructurePage.likeCreate'), divider: true },
    { label: t('routes.demo.partManager.productStructurePage.quickReport'), divider: true },
    { label: t('routes.demo.partManager.productStructurePage.materialCost'), divider: true },
    { label: t('routes.demo.partManager.productStructurePage.batchPrint'), divider: true },
    { label: t('routes.demo.partManager.productStructurePage.workHandover'), divider: true },
    {
      label: t('routes.components.structuralDescriptionModal.structuralDescription'),
      divider: true,
      handler: () => {
        openStructureDes(true);
      },
    },
    {
      label: t('routes.demo.documentWorkPlace.basicFunction'),
      divider: true,
      children: [
        { label: t('routes.demo.partManager.productStructurePage.deleteNode'), divider: true },
        { label: t('routes.demo.partManager.productStructurePage.cutNode'), divider: true },
        { label: t('routes.demo.partManager.productStructurePage.copyNode'), divider: true },
        { label: t('routes.demo.partManager.productStructurePage.pasteNode'), divider: true },
        { label: t('routes.demo.partManager.productStructurePage.replaceNode'), divider: true },
      ],
    },
  ]);

  const getTableData = async () => {
    // 路由query传参，根据id获取表格参数
    let PartId = route.params.id;
    let PartVersion = route.params.version;
    const res = await GetPartStructure(PartId, PartVersion);
    treeData.value = res;
    tableData.value = await GetPartStructureTable(PartId, PartVersion);
    // 获取树的数据
    // 设置表头
    setColumns(tableData.value.listPartHeader);
    // 获取表格的数据
    setTableData(tableData.value.partDt);
  };

  // 选择树
  const selectTree = (selectedKeys: any, e) => {
    console.log(e);
    let SelectTime = getForm().getFieldsValue().selectTime;
    SelectTime === undefined ? (SelectTime = '') : (SelectTime = SelectTime);
    let result = findPart(treeData.value, selectedKeys[0]);
    GetPartStructureTableByTree(result.thitObjectId, result.version, result.type, SelectTime).then(
      (res) => {
        setColumns(res.listPartHeader);
        setTableData(res.partDt);
      },
    );
  };

  const findPart = (objArray, partId) => {
    for (let i = 0; i < objArray.length; i++) {
      if (objArray[i].partId === partId) {
        return objArray[i];
      } else if (objArray[i].listSonPart) {
        let result = findPart(objArray[i].listSonPart, partId);
        if (result) {
          return result;
        }
      }
    }
    return null;
  };

  // onMounted
  onMounted(() => {
    getTableData();
  });

  // 初始化表格
  const [registerTable, { setColumns, setTableData, getForm }] = useTable({
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    rowKey: 'id',
    useSearchForm: true,
    formConfig: getFormConfig(), // 表单配置
  });

  // 生成图档
  const [registerFrame, { openModal: openFrame }] = useModal();
  // 显示设置
  const [registerDisplaySettings, { openModal: openSetting }] = useModal();
  // 添加子件
  const [registerAddChild, { openModal: openAddChild }] = useModal();
  // 结构描述
  const [registerStructureDes, { openModal: openStructureDes }] = useModal();
  // 调整子件顺序
  const [registerAdjustSubPartOrder, { openModal: openAdjustSubPartOrder }] = useModal();
</script>
